<template>
  <div class="search-wrap">
    <input type="text"
    :placeholder="placeholder"
    :maxlength="maxlength"
    :value="inputValue"
    @input="searchData($event)"
    >

  </div>

</template>

<script>
import {ref, computed,watch} from 'vue'
import { useStore } from 'vuex'

import getData from '@/services'
import {getNowDate,formatUserDate} from '@/libs/utils'

// import {ref} from 'vue'
// import {} from 'vuex'
export default {
    name:'SearchInput',
      props: {
        placeholder: String,
        maxlength: Number
    },
    setup(porps){

      const inputValue = ref(''),
            store = useStore(),
            state = store.state;
            console.log(state);
      const searchData = (e) =>{
        //获取用户输入的值 
        inputValue.value = e.target.value;
        //获取state仓库数据 field默认的day值
        const field = computed(()=>state.field).value;
       
     //当用户输入的值为和限定的输入的maxlength相等
    if(inputValue.value.length == porps.maxlength ){
      //这里是监听用户输入的值工具函数将用户输入的20200616转换为接口需要的2020-6-16
      getData(store,field,formatUserDate(inputValue.value));
    }else if( inputValue.value.length === 0){
      getData(store,field,getNowDate(field))
    }
      }

    watch(()=>{
      return state.field;
    },()=>{
      inputValue.value = ''
    })


      return {
        searchData,
        inputValue 
      }
    }

}
</script>

<style lang="scss" scoped>
.search-wrap {
    position: fixed;
    top: .44rem;
    left: 0;
    z-index: 1;
    width: 100%;
    height: .38rem;
    padding: .03rem .1rem;
    
    box-sizing: border-box;
    background-color: #fff;

    input {
        position: absolute;
        top: 0rem;
       
        width:100%;
        height:100%;
        font-size: .14rem;
        border: 1px solid #ddd;
        text-indent: .1rem;
        border-radius: 0.2rem;
        outline:none;
        border-bottom: 1px solid #ddd;
     &:focus {
        border-color: #ed4040;
        box-shadow: 0 0 .02rem #ed4040;
        transition: all .3s;
    }        
   }
}

</style>